<!DOCTYPE html>
<html>

<head>
    <title>进度</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--responsive-->
    <link rel="shortcut icon" href="../../Content/img/jridge.ico"/>
    <link rel="bookmark" href="../../Content/img/jridge.ico"/>
    <script src="../../Scripts/jquery-1.10.2.min.js"></script>
    <script src="../../Scripts/clipboard-polyfill.js"></script>
    <!--vue-->
    <script src="../../Scripts/vue-2.5.9/vue.min.js"></script>
    <!--axios-->
    <script src="../../Scripts/vue-2.5.9/axios.min.js"></script>
    <!--elementUI-->
    <script src="../../Scripts/elementUI-2.2.2/index.js"></script>
    <link rel="stylesheet" href="../../Scripts/elementUI-2.2.2/theme-chalk/index.css">
    <!--custom-->
    <link rel="stylesheet" href="../../Content/vue-common.css">
    <script src="../../Scripts/service/vue-service.js" ></script>
    <style>
        .workshop-name{
            text-align:center;
            font-size:26px;
            font-weight:bold;
            text-shadow: 2px 2px 2px #ddd;
            border-top:1px solid #ddd;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .workshop-body{
            width: 100%;
            margin-bottom: 5px;
        }
        .workshop-body table{
            width: 100%;
        }
        .progress{
            margin-bottom: 0!important;
        }
        .workshop-name:hover{  
            overflow: visible;  
            white-space: normal;
        }  
        th div,.num div{
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
        .fix_table table{
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .box_title{
            padding: 0 15px;
        }
        .box_title h3{
            color: #673ab7;
        }
    </style>
</head>
<body>
    <div id="app">
        <header-bar :pagename="pagename" :userinfo="userinfo"></header-bar>
        <div id="container">
            <!-- 操作区 -->
            <el-row style="margin-bottom:10px">
                <el-button type="primary" style="float:right" @click="returnpage()" v-show="!productionschedule">返回</el-button>
            </el-row>
            <el-row v-loading="loading" style="min-height:300px">
                <!-- 计划层面 -->
                <el-row :gutter="20" v-show="productionschedule" style="margin: 8px 0 5px 0">
                    <el-col :span="24">
                        <el-form label-position="left" label-width="80px">
                            <el-col :sm="12" :lg="6" :xl="6">
                                <el-form-item label="批次号">
                                    <el-input v-model="search.lotno" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="12" :lg="6" :xl="6">
                                <el-form-item label="产品名称">
                                    <el-input v-model="search.name" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="12" :lg="6" :xl="6">
                                <el-form-item label="产品编号">
                                    <el-input v-model="search.productno" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :sm="12" :lg="6" :xl="6">
                                <el-form-item>
                                    <el-button type="primary" @click="load_mesproductionschedule()">查询</el-button>
                                </el-form-item>
                            </el-col>
                        </el-form>
                    </el-col>
                </el-row>
                <div id="productionschedule" v-show="productionschedule" style="overflow:hidden">
                    <el-col :sm="8" :md="8" :lg="8" v-for="list in mesproductionschedule_data" v-if="mesproductionschedule_data.length>0" >
                        <a href="javascript:;" @click="load_process(list)">
                            <el-col :span="24" class="workshop-name">
                                <span>{{list.properties.mesproductionschedule__name}}</span>
                            </el-col>
                            <el-row class="workshop-body">
                                <table>
                                    <thead>
                                        <th><div>批次号</div></th>
                                        <th><div>计划数量</div></th>
                                        <th><div>已完工数量</div></th>
                                        <th><div>剩余数量</div></th>
                                    </thead>
                                    <colgroup>
                                        <col width="25%">
                                        <col width="25%">
                                        <col width="25%">
                                        <col width="25%">
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="num"><div>{{list.properties.mesproductionschedule__lotno}}</div></td>
                                            <!-- 计划数量 -->
                                            <td class="num"><div>{{list.properties.mesproductionschedule__lotnum}}</div></td>
                                            <!-- 已完工数量 -->
                                            <td class="num"><div>{{list.properties.mesproductionschedule__sumprdavailquantity}}</div></td>
                                            <!-- 未完工数量 -->
                                            <td class="num"><div>{{list.properties.mesproductionschedule__lotnum -list.properties.mesproductionschedule__sumprdavailquantity}}</div></td>
                                        
                                        </tr>
                                        <tr>
                                            <td colspan="4">
                                                <el-progress :text-inside="true" :stroke-width="18" :percentage="list.properties.progress" :status="list.properties.progressColor"></el-progress>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </el-row>
                        </a>
                    </el-col>
                </div>
                <!-- 工序层面 -->
                <div v-show="process" class='fix_table'style="position:fixed;left:0;bottom:0;width:100%;z-index:10">
                    <table style="width:80%;min-width:600px;margin:0 auto;background:#673ab7;color:#fff" v-if="tempItem_mesproductionschedule">
                        <thead>
                            <th>计划号</th>
                            <th>名称</th>
                            <th>计划数量</th>
                            <th>剩余数量</th>
                            <th>进度</th>
                        </thead>
                        <colgroup>
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                            <col width="16%">
                            <col width="36%">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="num" style="background:#673ab7;font-size:17px;padding-bottom:16px;text-align:center">{{tempItem_mesproductionschedule.properties.mesproductionschedule__description}}</td>
                                <td class="num" style="background:#673ab7;font-size:17px;padding-bottom:16px;text-align:center">{{tempItem_mesproductionschedule.properties.mesproductionschedule__name}}</td>
                                <td class="num" style="background:#673ab7;font-size:17px;padding-bottom:16px;text-align:center">{{tempItem_mesproductionschedule.properties.mesproductionschedule__lotnum}}</td>
                                <td class="num" style="background:#673ab7;font-size:17px;padding-bottom:16px;text-align:center">{{tempItem_mesproductionschedule.properties.mesproductionschedule__lotnum-tempItem_mesproductionschedule.properties.mesproductionschedule__sumprdavailquantity}}</td>
                                <td style="font-size:17px;padding-bottom:16px">
                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="tempItem_mesproductionschedule.properties.progress" :status="tempItem_mesproductionschedule.properties.progressColor"></el-progress>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="process" v-show="process" style="overflow:hidden;padding-bottom:80px">
                    <el-col :sm="8" :md="8" :lg="8" v-for="list in process_data" v-if="process_data.length>0">
                        <a v-bind:href="list.properties.url" target="_blank">
                            <el-col :span="24" class="workshop-name">
                                <span>{{list.properties.name}}</span>
                            </el-col>
                            <el-row class="workshop-body">
                                <table>
                                    <thead>
                                        <th><div>计划数量</div></th>
                                        <th><div>剩余数量</div></th>
                                        <th><div>不良数量</div></th>
                                    </thead>
                                    <colgroup>
                                        <col width="33.3%">
                                        <col width="33.3%">
                                        <col width="33.3%">
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="num"><div>{{list.properties.orderquantity}}</div></td>
                                            <td class="num"><div>{{list.properties.orderquantity-list.properties.realquantity}}</div></td>
                                            <td class="num"><div>{{list.properties.rejectquantity}}</div></td>
                                        </tr>
                                        <tr>
                                            <td colspan="3">
                                                <el-progress :text-inside="true" :stroke-width="18" :percentage="list.properties.progress" :status="list.properties.progressColor"></el-progress>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </el-row>
                        </a>
                    </el-col>
                </div>
            </el-row>
        </div>
        <!--组件弹出框-->
        <component :is="differentComponentDialog" :obj="differentComponentItem" :userinfo="userinfo"></component>
    </div>
    <script src="progress.js"></script>
    <script src="../../Template/vue-components.js" ></script>
</body>
</html>